import { default as VChart } from '../../../../src/index';

const spec = {
  type: 'pie',
  categoryField: '20001',
  valueField: '230719190940041',
  data: [
    {
      id: 'data',
      values: [
        {
          '20001': '复印机-中南',
          '230719190940041': '573740.8033447266',
          '230719190940044': '复印机',
          '230719190940047': '中南'
        },
        {
          '20001': '复印机-东北',
          '230719190940041': '337993.04010009766',
          '230719190940044': '复印机',
          '230719190940047': '东北'
        },
        {
          '20001': '器具-中南',
          '230719190940041': '564002.4886322021',
          '230719190940044': '器具',
          '230719190940047': '中南'
        },
        {
          '20001': '器具-东北',
          '230719190940041': '407333.6141357422',
          '230719190940044': '器具',
          '230719190940047': '东北'
        },
        {
          '20001': '书架-中南',
          '230719190940041': '525289.0148620605',
          '230719190940044': '书架',
          '230719190940047': '中南'
        },
        {
          '20001': '书架-东北',
          '230719190940041': '295175.3292236328',
          '230719190940044': '书架',
          '230719190940047': '东北'
        },
        {
          '20001': '椅子-中南',
          '230719190940041': '522911.84576416016',
          '230719190940044': '椅子',
          '230719190940047': '中南'
        },
        {
          '20001': '椅子-东北',
          '230719190940041': '366799.0764160156',
          '230719190940044': '椅子',
          '230719190940047': '东北'
        },
        {
          '20001': '电话-中南',
          '230719190940041': '423907.14880371094',
          '230719190940044': '电话',
          '230719190940047': '中南'
        },
        {
          '20001': '电话-东北',
          '230719190940041': '280637.64530944824',
          '230719190940044': '电话',
          '230719190940047': '东北'
        },
        {
          '20001': '收纳具-中南',
          '230719190940041': '298180.5408668518',
          '230719190940044': '收纳具',
          '230719190940047': '中南'
        },
        {
          '20001': '收纳具-东北',
          '230719190940041': '162163.54042816162',
          '230719190940044': '收纳具',
          '230719190940047': '东北'
        },
        {
          '20001': '配件-中南',
          '230719190940041': '238955.1369781494',
          '230719190940044': '配件',
          '230719190940047': '中南'
        },
        {
          '20001': '配件-东北',
          '230719190940041': '180783.90380859375',
          '230719190940044': '配件',
          '230719190940047': '东北'
        },
        {
          '20001': '设备-中南',
          '230719190940041': '229972.53970336914',
          '230719190940044': '设备',
          '230719190940047': '中南'
        },
        {
          '20001': '设备-东北',
          '230719190940041': '136781.42694091797',
          '230719190940044': '设备',
          '230719190940047': '东北'
        },
        {
          '20001': '桌子-中南',
          '230719190940041': '219736.32006835938',
          '230719190940044': '桌子',
          '230719190940047': '中南'
        },
        {
          '20001': '桌子-东北',
          '230719190940041': '184567.76220703125',
          '230719190940044': '桌子',
          '230719190940047': '东北'
        },
        {
          '20001': '用具-中南',
          '230719190940041': '131991.02015686035',
          '230719190940044': '用具',
          '230719190940047': '中南'
        },
        {
          '20001': '(其他)',
          '230719190940041': '738060.3718986511'
        }
      ],
      transform: [
        {
          type: 'fields',
          options: {
            fields: {
              '20001': {
                alias: '图例项 ',
                domain: [
                  '复印机-中南',
                  '复印机-东北',
                  '器具-中南',
                  '器具-东北',
                  '书架-中南',
                  '书架-东北',
                  '椅子-中南',
                  '椅子-东北',
                  '电话-中南',
                  '电话-东北',
                  '收纳具-中南',
                  '收纳具-东北',
                  '配件-中南',
                  '配件-东北',
                  '设备-中南',
                  '设备-东北',
                  '桌子-中南',
                  '桌子-东北',
                  '用具-中南',
                  '(其他)'
                ]
              },
              '230719190940041': {
                alias: '销售额'
              },
              '230719190940044': {
                alias: '子类别'
              },
              '230719190940047': {
                alias: '地区'
              }
            }
          }
        }
      ]
    }
  ],
  outerRadius: 0.75,
  label: {
    visible: true,
    overlap: {
      hideOnHit: true
    },
    style: {},
    color: null,
    strokeOpacity: 1,
    strokeWidth: 0,
    position: 'outside'
  },
  color: {
    field: '20001',
    type: 'ordinal',
    range: [
      '#2E62F1',
      '#4DC36A',
      '#FF8406',
      '#FFCC00',
      '#4F44CF',
      '#5AC8FA',
      '#003A8C',
      '#B08AE2',
      '#FF6341',
      '#98DD62',
      '#07A199',
      '#87DBDD',
      '#2E62F1',
      '#4DC36A',
      '#FF8406',
      '#FFCC00',
      '#4F44CF',
      '#5AC8FA',
      '#003A8C',
      '#B08AE2',
      '#FF6341',
      '#98DD62',
      '#07A199',
      '#87DBDD',
      '#2E62F1',
      '#4DC36A',
      '#FF8406',
      '#FFCC00',
      '#4F44CF',
      '#5AC8FA',
      '#003A8C',
      '#B08AE2',
      '#FF6341',
      '#98DD62'
    ],
    specified: {}
  },
  legends: [
    {
      type: 'discrete',
      orient: 'right',
      position: 'start',
      visible: true,
      maxWidth: 257,
      hover: false,
      maxCol: 1,
      title: {
        textStyle: {
          fontSize: 12,
          fill: '#6F6F6F'
        }
      },
      item: {
        spaceRow: 0,
        spaceCol: 0,
        padding: {
          top: 4,
          bottom: 4,
          left: 4,
          right: 22
        },
        background: {
          style: {
            fillOpacity: 0.001
          }
        },
        label: {
          style: {
            fontSize: 12,
            fill: '#6F6F6F'
          }
        },
        shape: {
          style: {
            symbolType: 'square'
          }
        }
      },
      pager: {
        textStyle: {},
        handler: {
          style: {},
          state: {
            disable: {}
          }
        }
      },
      padding: {
        top: 0,
        bottom: 0,
        left: 16,
        right: 0
      }
    }
  ],
  hover: {
    enable: true
  },
  select: {
    enable: true
  },
  pie: {
    state: {
      hover: {
        cursor: 'pointer',
        fillOpacity: 0.8,
        stroke: '#58595B',
        lineWidth: 1,
        zIndex: 500,
        outerRadius: 0.8
      },
      selected: {
        cursor: 'pointer',
        fillOpacity: 1,
        stroke: '#58595B',
        lineWidth: 1,
        outerRadius: 0.8
      },
      selected_reverse: {
        fillOpacity: 0.3,
        strokeWidth: 0.3
      }
    },
    clipByLayout: true
  },
  background: 'rgba(255, 255, 255, 0)',
  rose: {
    clipByLayout: true
  },
  dataKey: ['20001']
};

const vchart = new VChart(spec as any, { dom: document.getElementById('chart') as HTMLElement });
vchart.renderAsync();

window['vchart'] = vchart;

setTimeout(() => {
  vchart.updateSpec({
    type: 'pie',
    categoryField: '20001',
    valueField: '230719190940041',
    data: [
      {
        id: 'data',
        values: [
          {
            '20001': '器具-东北',
            '230719190940041': '407333.6141357422',
            '230719190940044': '器具',
            '230719190940047': '东北'
          },
          {
            '20001': '椅子-东北',
            '230719190940041': '366799.0764160156',
            '230719190940044': '椅子',
            '230719190940047': '东北'
          },
          {
            '20001': '复印机-东北',
            '230719190940041': '337993.04010009766',
            '230719190940044': '复印机',
            '230719190940047': '东北'
          },
          {
            '20001': '书架-东北',
            '230719190940041': '295175.3292236328',
            '230719190940044': '书架',
            '230719190940047': '东北'
          },
          {
            '20001': '电话-东北',
            '230719190940041': '280637.64530944824',
            '230719190940044': '电话',
            '230719190940047': '东北'
          },
          {
            '20001': '桌子-东北',
            '230719190940041': '184567.76220703125',
            '230719190940044': '桌子',
            '230719190940047': '东北'
          },
          {
            '20001': '配件-东北',
            '230719190940041': '180783.90380859375',
            '230719190940044': '配件',
            '230719190940047': '东北'
          },
          {
            '20001': '收纳具-东北',
            '230719190940041': '162163.54042816162',
            '230719190940044': '收纳具',
            '230719190940047': '东北'
          },
          {
            '20001': '设备-东北',
            '230719190940041': '136781.42694091797',
            '230719190940044': '设备',
            '230719190940047': '东北'
          },
          {
            '20001': '用具-东北',
            '230719190940041': '74156.23627090454',
            '230719190940044': '用具',
            '230719190940047': '东北'
          },
          {
            '20001': '信封-东北',
            '230719190940041': '50332.65993499756',
            '230719190940044': '信封',
            '230719190940047': '东北'
          },
          {
            '20001': '用品-东北',
            '230719190940041': '47610.72386550903',
            '230719190940044': '用品',
            '230719190940047': '东北'
          },
          {
            '20001': '纸张-东北',
            '230719190940041': '47254.48011779785',
            '230719190940044': '纸张',
            '230719190940047': '东北'
          },
          {
            '20001': '装订机-东北',
            '230719190940041': '45179.95973491669',
            '230719190940044': '装订机',
            '230719190940047': '东北'
          },
          {
            '20001': '美术-东北',
            '230719190940041': '25795.55990600586',
            '230719190940044': '美术',
            '230719190940047': '东北'
          },
          {
            '20001': '系固件-东北',
            '230719190940041': '23673.776067733765',
            '230719190940044': '系固件',
            '230719190940047': '东北'
          },
          {
            '20001': '标签-东北',
            '230719190940041': '15328.740070343018',
            '230719190940044': '标签',
            '230719190940047': '东北'
          }
        ],
        transform: [
          {
            type: 'fields',
            options: {
              fields: {
                '20001': {
                  alias: '图例项 ',
                  domain: [
                    '器具-东北',
                    '椅子-东北',
                    '复印机-东北',
                    '书架-东北',
                    '电话-东北',
                    '桌子-东北',
                    '配件-东北',
                    '收纳具-东北',
                    '设备-东北',
                    '用具-东北',
                    '信封-东北',
                    '用品-东北',
                    '纸张-东北',
                    '装订机-东北',
                    '美术-东北',
                    '系固件-东北',
                    '标签-东北'
                  ]
                },
                '230719190940041': {
                  alias: '销售额'
                },
                '230719190940044': {
                  alias: '子类别'
                },
                '230719190940047': {
                  alias: '地区'
                }
              }
            }
          }
        ]
      }
    ],
    outerRadius: 0.75,
    label: {
      visible: true,
      overlap: {
        hideOnHit: true
      },
      style: {},
      color: null,
      strokeOpacity: 1,
      strokeWidth: 0,
      position: 'outside'
    },
    color: {
      field: '20001',
      type: 'ordinal',
      range: [
        '#2E62F1',
        '#4DC36A',
        '#FF8406',
        '#FFCC00',
        '#4F44CF',
        '#5AC8FA',
        '#003A8C',
        '#B08AE2',
        '#FF6341',
        '#98DD62',
        '#07A199',
        '#87DBDD',
        '#2E62F1',
        '#4DC36A',
        '#FF8406',
        '#FFCC00',
        '#4F44CF'
      ],
      specified: {}
    },
    legends: [
      {
        type: 'discrete',
        orient: 'right',
        position: 'start',
        visible: true,
        maxWidth: 257,
        hover: false,
        maxCol: 1,
        title: {
          textStyle: {
            fontSize: 12,
            fill: '#6F6F6F'
          }
        },
        item: {
          spaceRow: 0,
          spaceCol: 0,
          padding: {
            top: 4,
            bottom: 4,
            left: 4,
            right: 22
          },
          background: {
            style: {
              fillOpacity: 0.001
            }
          },
          label: {
            style: {
              fontSize: 12,
              fill: '#6F6F6F'
            }
          },
          shape: {
            style: {
              symbolType: 'square'
            }
          }
        },
        pager: {
          textStyle: {},
          handler: {
            style: {},
            state: {
              disable: {}
            }
          }
        },
        padding: {
          top: 0,
          bottom: 0,
          left: 16,
          right: 0
        }
      }
    ],
    hover: {
      enable: true
    },
    select: {
      enable: true
    },
    pie: {
      state: {
        hover: {
          cursor: 'pointer',
          fillOpacity: 0.8,
          stroke: '#58595B',
          lineWidth: 1,
          zIndex: 500,
          outerRadius: 0.8
        },
        selected: {
          cursor: 'pointer',
          fillOpacity: 1,
          stroke: '#58595B',
          lineWidth: 1,
          outerRadius: 0.8
        },
        selected_reverse: {
          fillOpacity: 0.3,
          strokeWidth: 0.3
        }
      },
      clipByLayout: true
    },
    background: 'rgba(255, 255, 255, 0)',
    rose: {
      clipByLayout: true
    },
    dataKey: ['20001']
  });
}, 1000);
